import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//Row与Column是单行单列的，Row的横向如果放不下并不会自动换行，Wrap则没这个限制，mainAxis上空间不足时，则向crossAxis扩展。可以理解成流式布局
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp是根组件
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wrap'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

//自定义内容组件
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Container壳可以去掉
    return Container(
      height: 300,
      width: 200,
      color: Colors.pink,
      padding: EdgeInsets.all(10),
      child: Wrap(
        spacing: 10,
        runSpacing: 40,
        alignment: WrapAlignment.center,
        runAlignment: WrapAlignment.spaceAround,
        children: [
          MyButton("第1集"),
          MyButton("第2集"),
          MyButton("第3集"),
          MyButton("第4集"),
          MyButton("第5集"),
          MyButton("第6集")
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  //final赋值后不可更改，所以需要在构造函数强制要求赋值
  final String text;
  const MyButton(this.text);
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: () {}, child: Text(this.text));
  }
}
